<template>
  <div class="menu-wrapper">
    <template v-for="item in routes" v-if="!item.hidden&&item.children.length > 0 ">
      <!--<router-link v-if="item.children.length===1 && !item.children[0].children" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">-->
      <router-link v-if="!item.children[0].children && item.menuLevel === 1" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name" class="level1">
        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown' @click="loadPage(item.path+'/'+item.children[0].path)">
          <!--<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>-->
          <i v-if="item.children[0].meta&&item.children[0].meta.icon" class="iconfont" :class="item.children[0].meta.icon"></i>
          <span v-if="item.children[0].meta&&item.children[0].meta.title" :class="item.children[0].meta.titleClass">{{generateTitle(item.children[0].meta.title)}}</span>
        </el-menu-item>
      </router-link>

      <el-submenu v-else :index="item.name||item.path" :key="item.name">
        <template slot="title">
          <!--<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>-->
          <i v-if="item.meta&&item.meta.icon" class="iconfont" :class="item.meta.icon"></i>
          <span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
        </template>
        <!--二级菜单-->
        <template v-for="childL1 in item.children">
          <template v-if="!childL1.children&&!childL1.hidden">
            <router-link :to="item.path+'/'+childL1.path" :key="childL1.name">
              <el-menu-item :index="childL1.path" @click="loadPage(item.path+'/'+childL1.path)">
                <span v-if="childL1.meta&&childL1.meta.title">{{generateTitle(childL1.meta.title)}}</span>
              </el-menu-item>
            </router-link>
          </template>
          <!--三级菜单-->
          <!--<template v-else>-->
          <template v-else-if="childL1.children&&!childL1.hidden">
            <el-submenu :index="childL1.name||childL1.path">
              <span slot="title">{{generateTitle(childL1.meta.title)}}</span>
              <template v-for="childL2 in childL1.children" v-if="!childL2.hidden">
                <router-link :to="item.path+'/'+childL1.path+'/'+childL2.path" :key="childL2.name" class="level3">
                  <el-menu-item :index="childL2.path"  @click="loadPage(item.path+'/'+childL1.path+'/'+childL2.path)"  class="level3-list">
                    <!--<i class="iconfont icon-dian" style="font-size:6px;"></i><svg-i v-if="childL2.meta&&childL2.meta.icon" class="iconfont" :class="childL2.meta.icon"></svg-i>-->
                    <i class="solidPoint"></i><svg-i v-if="childL2.meta&&childL2.meta.icon" class="iconfont" :class="childL2.meta.icon"></svg-i>
                    <span v-if="childL2.meta&&childL2.meta.title" style="margin-left:-5px;">{{generateTitle(childL2.meta.title)}}</span>
                  </el-menu-item>
                </router-link>
              </template>
            </el-submenu>
          </template>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script>
  import { generateTitle } from '@/utils/i18n'
  import { getUrl, getUsername, setPageName } from "../../../../utils/auth.js";
  export default {
    name: 'SidebarItem',
    props: {
      routes: {
        type: Array
      }
    },
    data() {
      return {
        pageurl : ""
      }
    },
    methods: {
      generateTitle,
      loadPage(item) {
        var _this = this;
        _this.pageurl = item;
        setPageName(_this.pageurl)
        Avatar.push([
          "track",
          [
            "category",
            "loginSuccess",
            "label",
            {
              url: getUrl(),
              userName: getUsername(),
              pageurl: _this.pageurl
            },
            0
          ]
        ]);
      }
    }
  }
</script>

<style lang="scss" scoped>
  i {
    color: #e6e8f3;
    margin-right: 5px;
  }
  .icon-yonghuming {
    position: relative;
    right: 1px;
    font-size: 19px;
  }
  .icon-yonghuming + span {
    position: relative;
    right: 3px;
  }
  .icon-CustomerInsight + span {
    position: relative;
    right: 3px;
  }
  .icon-drgspingtairuanjianxitong24 {
    position: relative;
    right: 1px;
    font-size: 18px;
  }
  .icon-drgspingtairuanjianxitong24 + span{
    position: relative;
    right: 2px;
  }
  .icon-guanyuwomen {
    position: relative;
    right: 1px;
    font-size: 19px;
  }
  .icon-guanyuwomen + span{
    position: relative;
    right: 3px;
  }
  .level3-list{
    padding-left:40px!important;
    .solidPoint{
      display:inline-block;
      width:4px;
      height:4px;
      margin-right:5px;
      border-radius:50%;
      background-color: #e6e8f3;
    }
  }
</style>

